<!-- 商品组件 -->
<template>
  <div
    class="swiper-item-box"
    :style="{
      'background-color': config.ConfigData.bgcolor,
      margin: '0 ' + config.ConfigData.margin + 'px',
      'border-radius': config.ConfigData.parentradius + 'px',
      padding: '0 ' + config.ConfigData.padding + 'px'
    }"
  >
    <div class="shop_item" v-if="config.ConfigData.type === 1">
      <div
        class="list"
        :style="{
          'background-color': config.ConfigData.itembgcolor,
          margin: '10px ' + config.ConfigData.itemmargin / 2 + 'px',
          'border-radius': config.ConfigData.itemradius + 'px',
          width: config.ConfigData.itemwidth + '%'
        }"
        v-for="(item, index) in config.DataList"
        :key="index"
      >
        <div class="image_box">
          <img
            :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
            lazy-load
            mode="aspectFill"
            :src="item.DefaultImageUrl | getgalleryImg('p450')"
          />
        </div>
        <div class="goods">
          <div
            class="product_name"
            :style="{ color: config.ConfigData.titlecolor }"
          >
            {{ item.ProductName }}
          </div>
          <!-- <div class="series">{{item.Spec==null?'':item.Spec}}</div> -->
          <!-- <div class="series">{{item.ProductNote==null?'':item.ProductNote}}</div> -->
          <div class="price" :style="{ color: config.ConfigData.pricecolor }">
            {{ item.SalePrice | getProductPrice }}
          </div>
          <!-- <div class="product_info"> -->
          <!-- <div class="cost_price">￥{{item.marketPrice}}</div> -->
          <!-- </div> -->
        </div>
      </div>
      <div
        class="list"
        v-if="config.DataList.length % 2 === 1"
        :style="{ margin: '10px ' + config.ConfigData.itemmargin / 2 + 'px' }"
      ></div>
    </div>
    <div v-if="config.ConfigData.type === 2">
      <div
        class="goods-info"
        :style="{
          'background-color': config.ConfigData.itembgcolor,
          'margin-top':
            index === 0 ? 0 : config.ConfigData.itemmargin / 2 + 'px',
          'border-radius': config.ConfigData.itemradius + 'px'
        }"
        v-for="(item, index) in config.DataList"
        :key="index"
      >
        <div class="img-box">
          <img
            :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
            lazy-load
            mode="aspectFill"
            :src="item.DefaultImageUrl | getgalleryImg('p450')"
            class="img"
          />
        </div>
        <div class="text-box">
          <div
            class="goods-title"
            :style="{ color: config.ConfigData.titlecolor }"
          >
            {{ item.ProductName }}
          </div>
          <!-- <div class="goods-label">{{item.Spec==null?'':item.Spec}}</div> -->
          <!-- <div class="goods-label">{{item.ProductNote==null?'':item.ProductNote}}</div> -->
          <div
            class="goods-price"
            :style="{ color: config.ConfigData.pricecolor }"
          >
            {{ item.SalePrice | getProductPrice }}
          </div>
          <!-- <div class="goods-dingjin">定金￥{{item.SalePrice}}</div> -->
        </div>
      </div>
    </div>
    <div v-if="config.ConfigData.type === 3">
      <div
        hover-class="none"
        class="goodsinfotype3"
        :style="{
          'background-color': config.ConfigData.itembgcolor,
          'margin-top':
            index === 0 ? 0 : config.ConfigData.itemmargin / 2 + 'px',
          'border-radius': config.ConfigData.itemradius + 'px'
        }"
        v-for="(item, index) in config.DataList"
        :key="index"
      >
        <img
          :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
          lazy-load
          mode="aspectFill"
          :src="item.DefaultImageUrl | getgalleryImg('p750')"
          class="img"
        />
        <div class="text-box">
          <div class="goodsinfotype3content">
            <div
              class="goods-title"
              :style="{ color: config.ConfigData.titlecolor }"
            >
              {{ item.ProductName | subStr(31) }}
            </div>
            <div
              class="goods-price"
              :style="{ color: config.ConfigData.pricecolor }"
            >
              {{ item.SalePrice | getProductPrice }}
            </div>
          </div>
          <!-- <div class="goods-label">{{util.isReallyNull(item.ProductNote)?'':item.ProductNote }}</div> -->
          <!-- <div class="goods-dingjin">定金￥{{item.SalePrice}}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductCopt",
  props: {
    config: Object
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>

<style lang="scss">
.swiper-item-box {
  padding: 0 5px;
  width: auto;
  background: transparent;
  .shop_item {
    //padding: 0px 8px;
    //background: #f4f6f6;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center; //padding-bottom: 30px;
    //margin-top: 30px;
  }
  .list {
    background: transparent;
    width: 44%;
    box-sizing: border-box;
    margin: 2.5px 2.5px;
    .image_box {
      img {
        // height: 175px;
      }
    }
    .product_name {
      font-size: 12px;
      font-family: "PingFang-SC-Medium";
      color: rgba(34, 34, 34, 1);
      font-weight: 500;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    .price {
      font-family: "PingFang-SC-Regular";
      font-weight: 400;
      color: rgba(249, 58, 38, 1);
      font-size: 12px;
    }
    .cost_price {
      color: rgba(249, 58, 38, 1);
      font-size: 12px;
      text-decoration: line-through;
      font-weight: 600;
    }
    .sale_num {
      color: #666666;
      font-size: 11px;
    }
    .goods {
      padding: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background: transparent;
      .series {
        font-size: 11px;
        color: #999999;
        padding-top: 3px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        align-content: center;
        line-height: 14px;
      }
    }
    .product_info {
      padding-top: 1px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: flex-end; //width: 334px
    }
    .cost_price {
      padding-left: 10px;
    }
    .sale_num {
      padding-left: 10px;
    }
  }
  .goods-info {
    height: 100px;
    background: transparent;
    border-radius: 5px;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    .img-box {
      width: 80px;
      height: 80px;
      border-radius: 5px;
      overflow: hidden;
      margin-right: 10px;
      background-color: transparent;
    }
    .text-box {
      width: 240px;
      .goods-title {
        font-size: 15px;
        font-family: "PingFang-SC-Bold";
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .goods-label {
        font-size: 14px;
        font-family: "PingFang-SC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin: 4px 0 5.5px 0;
        overflow: hidden;
        height: 15px;
      }
      .goods-price {
        font-family: "PingFang-SC-Medium";
        font-weight: 500;
        font-size: 15px;
        color: rgba(249, 58, 38, 1);
      }
      .goods-dingjin {
        font-family: "PingFang-SC-Medium";
        font-weight: 500;
        font-size: 12px;
        color: rgba(249, 58, 38, 1);
      }
      .buy-num {
        line-height: 24px;
        position: absolute;
        right: 15px;
        bottom: 28.5px;
        display: flex;
        font-size: 12px;
        text-align: center;
      }
    }
  }
  .goods-info .img-box .img {
    width: 80px;
    // height:80px;
  }
  .goodsinfotype3 {
    //height: 580px;
    margin-top: 25px;
    // padding: 0 10px;
    .img {
      // width: 686px;
      height: 215px;
      border-radius: 5px;
    }
    .text-box {
      display: flex;
      flex-direction: column;
      margin-top: 7.5px;
      .goodsinfotype3content {
        display: flex;
        flex-direction: row;
        .goods-title {
          font-size: 15px;
          font-family: "PingFang-SC-Bold";
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          width: 100%; // overflow: hidden;
        }
        .goods-price {
          font-size: 15px;
          font-family: "PingFang-SC-Bold";
          font-weight: bold;
          color: rgba(249, 58, 38, 1);
        }
      }
      .goods-label {
        margin-top: 10px;
        font-size: 12px;
        font-family: "PingFang-SC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        width: 100%;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}
</style>
